<template>
  <a-card title="用户设置" class="general-card" :bordered="false">
    <PickSearchColumn
      :columns="columnsSearch"
      @reset="
        (val) => {
          apiParams = { ...apiParams, ...val };
        }
      "
      @search="
        (val) => {
          apiParams = { ...apiParams, ...val };
        }
      "
    >
    </PickSearchColumn>
    <!-- <a-row style="margin-bottom: 16px">
      <a-col :span="16">
        <a-space>
          <a-button type="primary" @click="handleAdd"> 添加管理员 </a-button>
          <a-button @click="delAll"> 批量删除 </a-button>
          <a-button @click="resetPass"> 重置密码 </a-button>
        </a-space>
      </a-col>
    </a-row> -->
    <PickTablePage
      ref="tablePageRef"
      :columns="columnsTable"
      :methods="sortMethods"
      :api="getUserListData"
      :api-params="apiParams"
      :checkbox="true"
      :bordered="true"
    >
      <template #editor="{ data }">
        <a-button type="text" status="warning" @click="handleEdit(data)">
          角色分配
        </a-button>
      </template>
    </PickTablePage>
    <!-- 添加/编辑modal -->
    <a-modal
      v-model:visible="memberData.enableAddModal"
      :align-center="false"
      ok-text="提交"
      :mask-closable="false"
    >
      <template #title>角色分配</template>
      <a-form ref="formRef" :model="memberData.form">
        <a-form-item label="角色" field="roleIds">
          <a-select
            v-model="memberData.form.roleIds"
            multiple
            placeholder="请选择"
          >
            <a-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="memberData.enableAddModal = false">取消</a-button>
        <a-button type="primary" @click="verifyInsertUser">提交</a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script setup lang="ts">
  import {
    editOtherUser,
    getRoleList,
    getUserListData,
    getUser,
  } from '@/api/setting';
  import { PickSearchColumn, PickTablePage } from '@pickmall/ui-v3-components';

  import useCurrentInstance from '@/hooks/useCurrentInstance';
  import { MethodsRule, SearchRule } from '@/types/global';
  import { Message } from '@arco-design/web-vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { onMounted, reactive, ref } from 'vue';

  const tablePageRef = ref<any>('');
  const roleList = ref<any>([]); // 角色列表
  const modalType = ref<number>(0); // 新增编辑标识
  const formRef = ref<FormInstance>();

  interface formInterface {
    enableAddModal: boolean;
    form: {
      userId: string | number | undefined;
      roleIds: [];
    };
  }
  //  获取modal
  const modal = useCurrentInstance().globalProperties?.$modal;
  const columnsSearch: Array<SearchRule> = [
    {
      label: '姓名',
      model: 'realName',
      disabled: false,
      input: true,
    },

    {
      label: '手机号码',
      model: 'userName',
      disabled: false,
      input: true,
    },
  ];

  const columnsTable = ref([
    {
      title: '姓名',
      dataIndex: 'realName',
    },
    {
      title: '所属部门',
      dataIndex: 'departmentName',
    },
    {
      title: '手机号码',
      dataIndex: 'userName',
    },

    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
  ]);

  const sortMethods: MethodsRule = {
    title: '操作',
    width: 300,
    fixed: 'right',
    methods: [
      {
        title: '角色分配',
        callback: 'editor',
        slot: true,
        slotTemplate: 'editor',
      },
    ],
  };
  // 数据集
  const memberData = reactive<formInterface>({
    enableAddModal: false,
    form: {
      userId: undefined,
      roleIds: [],
    }, // 表单提交数据
  });
  // 确认提交
  const submitUser = () => {
    editOtherUser(memberData.form).then((res) => {
      if (res.data.success) {
        Message.success('角色分配成功');
        memberData.enableAddModal = false;
      }
    });
  };

  // 表单提交前验证当前表单
  async function verifyInsertUser() {
    const auth = await formRef.value?.validate();
    if (!auth) {
      submitUser();
    }
  }

  // 编辑回显
  function handleEdit(val: any) {
    console.log('编辑', val);
    getUser(val.userId).then((res) => {
      const result = res.data.result;
      memberData.form = {
        userId: result.userId,
        roleIds: result.roleIds,
      };
    });
    modalType.value = 1;
    memberData.enableAddModal = true;
  }

  const apiParams = ref({
    // disabled: 'OPEN',
  });

  // 获取角色列表
  const getRoleLists = () => {
    getRoleList({ pageNumber: 1, pageSize: 10000 }).then((res) => {
      if (res.data.success) {
        roleList.value = res.data.result.records;
      }
    });
  };

  // 初始化
  onMounted(() => {
    getRoleLists();
  });
</script>

<style lang="less" scoped>
  .face {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  .edit {
    margin-left: 10px;
  }
</style>
